<template>
  <div class="app-container">
    <el-form ref="attributeForm" :model="attributeForm" :inline="true">
        <el-form-item label="属性名称">
            <el-input v-model="attributeForm.SXMC" clearable placeholder="请输入属性名称"/>
        </el-form-item>
        <el-form-item label="说明">
            <el-input v-model="attributeForm.SM" clearable placeholder="请输入说明"/>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button  icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
          >修改</el-button>
        </el-col> -->
        <!-- <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
          >删除</el-button>
        </el-col> -->
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >导出</el-button>
        </el-col>
    </el-row>

    <el-table :data="attributeTable" :row-class-name="rowClassName" border default-expand-all row-key="id"  :tree-props="{children: 'children'}">
        <el-table-column prop="SXMC" label="属性名称" align="center"/> 
        <!-- <el-table-column prop="C" label="长(cm)" align="center"/> 
        <el-table-column prop="K" label="宽(cm)" align="center"/> 
        <el-table-column prop="G" label="高(厚)(cm)" align="center"/>  -->
        <el-table-column prop="SM" label="说明" align="center" />
        <el-table-column label="操作" align="center" width="300" >
            <template slot-scope="scope">
  <div style="display: flex; justify-content: center; align-items: center;">
    <div v-show="scope.row.type === 'parent'" style="display: flex; gap: 8px;">
      <el-button type="text" size="mini" @click="handleDetails(scope.row)">详情</el-button>
      <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
      <el-button type="text" size="mini" @click="handleAddChild(scope.row)">新增属性值</el-button>
      <el-button type="text" size="mini" @click="handleDelete(scope.row)" >删除</el-button>
    </div>
    <div v-show="scope.row.type === 'child'" style="display: flex; gap: 8px;">
      <el-button type="text" size="mini" @click="handleDetailsChild(scope.row)">属性值详情</el-button>
      <el-button type="text" size="mini" @click="handleUpdateChild(scope.row)">修改属性值</el-button>
      <el-button type="text" size="mini" @click="handleDelete(scope.row)" >删除</el-button>
    </div>
   
   
   
  </div>
</template>
          </el-table-column> 
    </el-table>

    <pagination :total="total" :pageXOffset.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

    <el-dialog :title="title" :visible.sync="open" append-to-body>
        <el-form ref="SXSZForm" :model="SXSZForm" :rules="rules" label-width="100px" :disabled="isView">
            <el-form-item label="属性名称">
                <el-input v-model="SXSZForm.SXMC" clearable placeholder="请输入属性名称"/>
            </el-form-item>
            <!-- <el-form-item label="长(cm)">
                <el-input v-model="SXSZForm.C" clearable placeholder="请输入长(cm)"/>
            </el-form-item>
            <el-form-item label="宽(cm)">
                <el-input v-model="SXSZForm.K" clearable placeholder="请输入宽(cm)"/>
            </el-form-item>
            <el-form-item label="高(厚)(cm)">
                <el-input v-model="SXSZForm.G" clearable placeholder="请输入高(厚)(cm)"/>
            </el-form-item> -->
            <el-form-item label="说明">
                <el-input type="textarea" v-model="SXSZForm.SM" clearable placeholder="请输入说明"/>
            </el-form-item>
            
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>

    <el-dialog :title="titleChild" :visible.sync="openChild" append-to-body>
        <el-form ref="SXSZFormChild" :model="SXSZFormChild" :rules="rulesChild" label-width="100px" :disabled="isViewChild">
            <el-form-item label="属性值">
                <el-input v-model="SXSZFormChild.SXMC" clearable placeholder="请输入属性值"/>
            </el-form-item>
           
            <el-form-item label="说明">
                <el-input type="textarea" v-model="SXSZFormChild.SM" clearable placeholder="请输入说明"/>
            </el-form-item>
            
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormChild">确 定</el-button>
          <el-button @click="cancelChild">取 消</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
    data () {
        return {
            title: "",
            titleChild: "",
            openChild: false,
            isViewChild: false,
            open: false,
            isView: false,
            attributeForm: {},
            SXSZFormChild:{},
            SXSZForm: {},
            rules: {},
            rulesChild: {},
            total: 8,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            attributeTable: [{
                id: 1,
                type: 'parent',
                SXMC: '3*3*0',
                C: '3',
                K: '3',
                SM: 'NOT SUITABLE FOR MICROWAVE'
            },{
                id: 2,
                type: 'parent',
                SXMC: '内销成品库用*成品类型属性',
                children: [{
                    id: 21,
                    type: 'child',
                    SXMC: '内销单'
                },{
                    id: 22,
                    type: 'child',
                    SXMC: '义乌单'
                }]
            },{
                id: 3,
                type: 'parent',
                SXMC: '外销成品库*成品类型属性',
                children: [{
                    id: 31,
                    type: 'child',
                    SXMC: '外销单',
                },{
                    id: 32,
                    type: 'child',
                    SXMC: '义乌单',
                }]
            },{
                id: 4,
                type: 'parent',
                SXMC: '销售订单用*底标属性',
                children: [{
                    id: 41,
                    type: 'child',
                    SXMC: '底标属性'
                }]
            },{
                id: 5,
                type: 'parent',
                SXMC: '销售订单单用*密胺工艺属性',
                children: [{
                    id: 51,
                    type: 'child',
                    SXMC: '双色外压花罩光'
                },{
                    id: 52,
                    type: 'child',
                    SXMC: '双色素面'
                }]
            },{
                id: 6,
                type: 'parent',
                SXMC: '销售订单用*贴花方式属性',
                children: [{
                    id: 61,
                    type: 'child',
                    SXMC: '贴花属性'
                }]
            },{
                id: 7,
                type: 'parent',
                SXMC: '销售订单用*原料属性',
                children: [{
                    id: 71,
                    type: 'child',
                    SXMC: '原料属性',
                }]
            },{
                id: 8,
                type: 'parent',
                SXMC: '原料流量属性',
                children: [{
                    id: 81,
                    type: 'child',
                    SXMC: '流量属性',
                }]
            },{
                id: 9,
                type: 'parent',
                SXMC: '纸箱尺寸设置',
            },{
                id: 10,
                type: 'parent',
                SXMC: '纸箱库用*纸箱类别属性',
                children: [{
                    id: 101,
                    type: 'child',
                    SXMC: '纸箱类别属性',
                }]
            }]
        }
    },
    methods: {
        //显示高亮
        rowClassName({ row }) {
          return row.SXMC === this.SXMC ? 'selected-row' : ''; // 判断是否选中
        },
        getList() {},
        handleAddChild() {
            this.openChild = true;
            this.titleChild = '新增属性值设置'
            this.isViewChild = false
            this.SXSZFormChild = {}
        },
        handleAdd() {
            this.open = true;
            this.title = '新增属性设置'
            this.isView = false
            this.SXSZForm = {}
        },
        handleUpdate(row) {
            this.SXSZForm = row
            this.open = true;
            this.title = '修改属性设置',
            this.isView = false
        },
        handleUpdateChild(row){
            this.SXSZFormChild = row
            this.openChild = true;
            this.titleChild = '修改属性值设置',
            this.isViewChild = false
        },
        handleDelete(row) {

        },
        handleDetailsChild(row) {
            this.isViewChild = true
            this.SXSZFormChild = row
            this.openChild = true
            this.titleChild = '查看属性值设置详情'
        },
        handleDetails(row) {
            this.isView = true
            this.SXSZForm = row
            this.open = true
            this.title = '查看属性设置详情'
        },
        submitForm() {
            this.open = false
        },
        cancel(){
            this.open = false
        },
        submitFormChild() {
            this.openChild = false
        },
        cancelChild(){
            this.openChild = false
        },
        handleQuery() {},
        resetQuery() {},
        handleExport() {},
    }
}
</script>

<style>
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}

</style>
